<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
		<meta name="description" content="This page describes an animal">
        <meta name="author" content="Zainul Franciscus">
		
        <title>Animal Description</title>
        		
        <link type="text/css" rel="stylesheet" href="css/smoothness/jquery-ui.css">
		<link type="text/css" rel="stylesheet" href="css/main.css" />

		<script type="text/javascript" src="scripts/lib/jquery/jquery.js"></script>
		<script type="text/javascript" src="scripts/lib/jquery/jquery-ui-1.10.2.custom.min.js"></script>
		<script type="text/javascript" src="scripts/lib/jquery/jquery.dateFormat-1.0.js"></script>
		<script type="text/javascript" src="scripts/lib/purl.js"></script>		
		<script type="text/javascript" src="scripts/src/common.js"></script>
		
		<script type="text/javascript">
			
			$(document).ready(function() {
			
				var url = window.location.href;
				var animalId = $.url(url).param('id');
				var ajaxUrl = "https://tasks.inlogik.com/devtest/animals/detail/" + animalId;
				
				$.ajax({
				  async: false,
				  dataType: "jsonp",
				  url: ajaxUrl,
				  success: function(animal) {
				  
					setValueOf($('#name')).to(animal.name);	
					setValueOf($('#type')).to(animal.type);					
					setValueOf($('#birthday')).to(convert(animal.birthday).toDDmmYYYY());
					setValueOf($('#weight')).to(animal.weight);
					when(animal.hasHorns).tickThisCheckbox($('#horncheckbox'));
					
					$( "#birthday" ).datepicker({   showOn: "button",
													buttonImage: "images/calendar_icon.jpg",
													buttonImageOnly: true											
												});
					
				  }	
				});
				
				
			} );
						
		</script>
    </head>
    <body>
	 
     <form  id="animalDetail" action="index.html" class="form">
		<fieldset>
			<legend>Detail: </legend>
			
			<label for="name" class="detailLabel">Name :</label>
			<input type="text" id="name" class="detailInput"/>			
		
			<label for="type" class="detailLabel">Type :</label>
			<input type="text" id="type" class="detailInput"/>			
		
			<label for="birthday" class="detailLabel">Birthday :</label>
			<input type="text" id="birthday" class="detailInput"/>			
		
			<label for="weight" class="detailLabel">Weight :</label>
			<input type="text" id="weight" class="detailInput"/>			
		
			<label for="horncheckbox" class="detailLabel">Horns ?</label>
			<input type="checkbox" id="horncheckbox" class="detailInput"/>
			
			<input type="submit" value="close">
			
		</fieldset>
	 </form>
     
    </body>
</html>
